<template>
	<!-- 图书信息 -->
	<view class="content" style="z-index: 1;position: fixed">
		<!-- 第一章 图书信息 -->
		<view class="back" @click="back">
			<uni-icons size="15" type="left"></uni-icons>
			{{ currChapter.name}}
		</view>
		<!-- 章节阅读页面 -->
		<view class="midd" style="height: 90vh;" @click="openConfig">
			<!-- 章节内容 -->
			<scroll-view :scroll-into-view="scrollIntoViewId" :show-scrollbar="false" scroll-y="true"
			 style="width: 100%;height: 100%;"  @scrolltolower = "getNextChapter">
				<view class="chapter-name" @click="back">
					{{ currChapter.chapterName}}
				</view>
				<view class="chapters">
					<rich-text v-for="item in chapters" :id= "'chapter'+item.id" :key="index"  :nodes="item.content" class="chapter"></rich-text>
				</view>
			</scroll-view>
		</view>
		<!-- 显示章节阅读进度、电量等信息 -->
		<view class="footer" style="height: 1vh;margin-top: 6rpx;">
			<label> 1/571</label>
			<view style="float: right;align-items: center;">
				<!-- 章节 -->
				<label>16:15</label>
				<!-- 电量显示 -->
				<progress :percent="30" activeColor="#918268"
					class="battery" stroke-width="8" style="display: inline-flex;width: 35rpx;margin-left: 20rpx;" />
			</view>
		</view>
		<!-- 顶部配置栏 -->
		<view v-show="isOpenConfig" class="config-top">
			<uni-icons size="15" type="left"></uni-icons>
			{{ currChapter.name}}
		</view>
		<!-- 底部配置栏 -->
		<view v-show="isOpenConfig" class="config-bottom">

		</view>

	</view>
</template>

<script>
	import * as request from '@/api/request';
	export default {
		name: "read",
		data() {
			return {
				// 当前书籍id
				currBookId:"",
				status: "more",
				// 是否打开配置弹出层
				isOpenConfig: false,
				// 当前章节索引
				currIndex: 0,
				// 章节内容
				currChapter: {},
				book:{},
				chapters:[],
				scrollIntoViewId:"",
			};
		},
		onReachBottom() {
			this.status = "loading"
			this.getNextChapter();
			uni.showToast({
				title: "触发下拉刷新了"
			})
		},
		// navigate.vue页面接受参数
		onLoad: function (option) {
			console.log(option)
			this.currBookId = option.id
			// 获取图书信息
			this.getBookInfo();
			// 获取第一章
			this.getNextChapter();
		},
		methods: {
			back() {

				uni.showToast({
					title: "返回"
				})
				uni.navigateBack({
					success() {
						console.log("成功")
					},
					fail(e) {
						console.log("失败", e)
					}
				});
			},
			// 打开小说设置页面
			openConfig() {
				this.isOpenConfig = !this.isOpenConfig;
				console.log(this.isOpenConfig)
			},
			// 获取图书信息
			getBookInfo(){
				request.get("/business/book/" + this.currBookId)
					.then((res) => {
						this.book = res.data;
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "数据加载失败",
							icon: 'error'
						})
					})
			},
			// 获取上一章
			getPreChapter(){
				if(this.currIndex -1 <= 0){
					uni.showToast({
						title: "卡门面已经没有章节了",
						icon: 'info'
					})
				}
				this.currIndex = this.currIndex - 1;
				request.get("/business/chapter/"+ this.currBookId + "/" + this.currIndex)
					.then((res) => {
						this.chapters.unshift(res.data)
						if(this.chapters.length >= 6){
							this.chapters.pop();
						}
						this.id = this.chapters[1].id;
						
						this.currChapter = res.data;
						console.log(this.currIndex, this.chapters)
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "上一章加载失败",
							icon: 'error'
						})
					})
			},
			// 获取下一章
			getNextChapter(){
				if(this.currIndex > this.book.chapterCnt){
					uni.showToast({
						title: "图书已看完",
						icon: 'info'
					})
				}
				this.currIndex = this.currIndex + 1;
				request.get("/business/chapter/"+ this.currBookId + "/" + this.currIndex)
					.then((res) => {
						this.chapters.push(res.data)
						if(this.chapters.length >= 3){
							this.chapters.shift();
							this.id = this.chapters[this.chapters.length -2].id
						}
						this.currChapter = res.data;
						console.log(this.currIndex, this.chapters)
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "下一章加载失败",
							icon: 'error'
						})
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		Box-sizing: border-box;
		padding: 10rpx 40rpx 0rpx 40rpx;
		background-color: #e0d9c6;

		.back {
			color: #a5a188;
			padding: 20rpx 0 10rpx 0rpx;
		}

		.chapter-name {
			padding-bottom: 30rpx;
			margin-top: 20rpx;
			color: #462e0d;
			font-size: 50rpx;
			font-weight: 1000;
		}

		.chapter {
			margin-top: 30rpx;
		}

		.footer {
			font-size: 15rpx;

			.battery {
				position: relative;
			}

			.battery:after {
				content: ".";
				font-size: 50rpx;
				display: inline-flex;
				position: absolute;
				left: 32rpx;
				top: -36rpx;
				color: #918268;

			}
		}
		// 顶部配置
		.config-top {
			position: fixed;
			background-color: white;
			width: 100%;
			height: 5%;
			top: 0;
			margin: 0px;
			padding-top: 10px;
			right: 0;
			z-index: 9999;
		}
		// 底部配置
		.config-bottom {
			position: fixed;
			background-color: white;
			width: 100%;
			height: 10%;
			bottom: 0;
			margin: 0px;
			right: 0;
			z-index: 9999;
		}
	}
</style>